<html>

<head>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        body {
            background-color: #f1f8fb;
        }

        div.container {
            width: 100%;
            height: 100%;
            margin-left: 300px;
        }

        div.loginDiv {
            width: 398px;
            height: 500px;
            margin: 50px auto;
        }

        div.login-top {
            height: 165px;
            margin-bottom: 1.5rem;
            text-align: center;
            margin-top: 45px;
            color: white;

        }

        .login-title {
            color: black;
        }

        div .login-pic {
            height: 110px;
            width: 100%;
            margin: 40px auto;
            font-size: 15px;

        }

        div .login-form {
            text-align: center;
            margin-top: 80px;

        }

        div .login-form input {
            width: 300px;
            height: 44px;
            margin: 0px auto;

        }

        .outer {
            width: 1200px;
            height: 660px;
            background-color: white;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-top-right-radius: 10px;
            /* 右上角 */

            border-bottom-right-radius: 10px;
            /* 右下角 */
        }

        .outer-left {
            width: 600px;
            height: 660px;
            float: left;
            background-color: #2885f7;
            border-top-left-radius: 10px;
            /* 左上角 */
            border-bottom-left-radius: 10px;
            /* 左下角 */
        }

        .outer-left>h3 {
            color: white;
            margin-left: 20px;
        }

        .outer-left>img {
            color: white;
            margin-left: 120px;
            margin-block: 200px;
        }

        .login-pic>img {
            margin-top: 100px;
        }

        #check {
            width: 16px;
            height: 16px;
            float: left;
            margin-left: 50px;
        }

        .checkbox-p {
            float: left;
            color: #c7c7c7;
            font-size: 13px;
        }

        .checkbox-p1 {
            margin-left: 20px;
            color: #c7c7c7;
        }
    </style>
    <script>
        $(function () {
            /**
          * 校验用户名格式
          */
            $("#username").change(function () {
                //准备正则表达式
                var regName = /^[\u2E80-\u9FFFa-zA-Z0-9_-]{2,12}$/;
                var content = $(this).val();
                //校验用户名
                if (!regName.test(content)) {
                    $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合");
                    $("#ErrorMsg").css("color", "red");
                    $("#submitBtn").attr("nameError", "true");

                } else {
                    $("#ErrorMsg").text("");
                    $("#submitBtn").attr("nameError", "false");

                }

            });

            /**
             * 点击提交按钮
             */
            $("#submitBtn").click(function () {
                var checks = $("input[type='checkbox']").is(':checked')

                //判断是否同意用户协议
                if (checks==false) {
                    $("#ErrorMsg").text("请先同意隐私政策！");
                    $("#ErrorMsg").css("color", "red");
                    return false;
                }

                //用户名密码非空判断
                if ($("#username").val().lenght == 0 || $("#password").val().length == 0) {
                    $("#ErrorMsg").text("用户名密码不能为空！");
                    $("#ErrorMsg").css("color", "red");
                    return false;
                }
                if ($(this).attr("nameError") == "true") {
                    $("#ErrorMsg").text("用户名只能是2-12位中文，数字或字母的组合");
                    return false;
                }
                if ($(this).attr("pwdError") == "true") {
                    $("#ErrorMsg").text("密码只能是4-16位数字，字母或特殊字符的组合");
                    return false;
                }
                return true;

            });

        });
    </script>
</head>


<body>

    <div class="outer">
        <div class="outer-left">
            <h3 class="">家庭医生后台管理系统</h3>
            <img src="../img/d1.png">
        </div>
        <div class="container">
            <div class="loginDiv">
                <div class="login-top">
                    <div class="login-pic">
                        <img src="../img/d2.jpg" width="40px" height="40px" /><br>
                        <h2 class="login-title">欢迎登录</h2>
                        <span id="ErrorMsg" class="help-block"></span>
                    </div>
                </div>

                <div class="login-form">
                    <form action="../index1" method="post">
                        <input type="text" placeholder="请输入手机号" id="username" name="username" class="form-control"><br>
                        <input type="password" id="password" placeholder="请输入密码" name="password"
                            class="form-control"><br>
                        <input type="checkbox" id="check" name="privacy">
                        <p class="checkbox-p">&nbsp;&nbsp;&nbsp;我已阅读并理解<a href="#" style="color:#116ef4">《用户隐私政策》</a>
                        </p>
                        <br><br>
                        <input type="submit" id="submitBtn" value="登录" class="form-control"
                               style="width:300px;background:#007bff;color:white;">

                        <br>
                        <p class="checkbox-p1">忘记密码就别联系管理员了</p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>